<template>
    <div class="me">
        <Header />
        <!-- 中间数据区域 -->
        <div class="container">
            <el-tabs :tab-position="tabPosition">
                 <el-tab-pane label="个人作品">
                    <personalWorks />
                </el-tab-pane>
                <el-tab-pane label="收藏">
                    <Collection />
                </el-tab-pane>
               
                <el-tab-pane label="历史记录">
                    <History />
                </el-tab-pane>
                <el-tab-pane label="修改用户信息">
                    <personInformation />
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>
<script>
import personInformation from "../user/usersInformation"
import personalWorks from "../user/personalWorks"
import Collection from "../user/Collection"
import Header from "../common/header"
import History from "../user/History"
export default {
     data() {
      return {
        tabPosition: 'left'
      };
    },
    components:{
        personInformation,
        personalWorks,
        Collection,
        Header,
        History
    },
    created(){

    },
    methods:{
        
    }
}
</script>

<style scoped lang="less">
    .me{
        min-height: 100vh;
        max-width: 100vw;
        background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
        position: relative;
        .dili{
            position: absolute;
            top: 20px;
            right: 20px;
        }
        .container{
            margin-top: 20px;
            padding: 20px 40px !important;
        }
        .header{
        padding-left: 200px;
        padding-right: 200px;
        height:100px;
        max-width: 100vw;
        box-sizing: border-box;
        background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
        position: relative;
        display: flex;
        img{
            flex: 2;
            height: 100px;
            display: inline-block;
        }
        h1{
            flex: 3;
            color: #2ed573;
            display: inline-block;
            text-align: center;
            height:100px;
            line-height: 100px;
            letter-spacing:20px;
        }
    }
    }
</style>